/*
 * @Author: ray
 * @Date:   2019-06-13 20:22:07
 * @Last Modified by:   ray
 * @Last Modified time: 2019-06-19 18:39:00
 */
import "./ZenDragable.css";
/**
 * ZenDragable description
 * @param {object} props [description]
 * @example
 <ZenDragable wrapClass="">测试的数据</ZenDragable>
 */
export default function ZenDragable(props) {
	const currentDomRef = React.useRef(null);

	React.useEffect(() => {
		let currentDomElment = currentDomRef.current;
		let styles = Uts.getStyle(currentDomElment);
		function mousemove(e) {
			e.preventDefault();
			Uts.addClass(currentDomElment, "zen_z-i-999");
			// console.log("moving");
			y = e.pageY - startY;
			x = e.pageX - startX;
			currentDomElment.style.top = y + "px";
			currentDomElment.style.left = x + "px";
		}

		function mouseup(e) {
			startX = x;
			startY = y;
			// console.log("mouseup");
			Uts.removeClass(currentDomElment, "zen_z-i-999");
			document.removeEventListener("mousemove", mousemove);
			document.removeEventListener("mouseup", mouseup);
		}

		let startX = parseFloat(styles.left) || 0,
			startY = parseFloat(styles.top) || 0,
			x = currentDomElment.offsetLeft,
			y = currentDomElment.offsetTop;

		currentDomElment.addEventListener("mousedown", function(event) {
			startX = event.pageX - startX;
			startY = event.pageY - startY;
			document.addEventListener("mousemove", mousemove);
			document.addEventListener("mouseup", mouseup);
		});
	}, []);
	return (
		<div
			className={Uts.sc(["ZenDragable", props.wrapClass])}
			ref={currentDomRef}
		>
			{props.children}
		</div>
	);
}
